import styled from 'styled-components';
import { ReduceStateModel } from './reducer';
import { StackItemType } from './processor';

const Stack = ({items}:{
  items: StackItemType[];
}) => {
  return (
    <ul>
    { items.map((item, index) => (
      <li key={index} className={item.func ? 'func' : 'value'}>{item.func || item.value}</li>
    ))}
    </ul>
  )
}
type VisualModelProps = {
  state: ReduceStateModel;
}
export const VisualModel: React.FC<VisualModelProps> = ({ state }) => {
  return (
    <Wrapper>
      <h1>VisualModel</h1>
      <h4>{state?.processor.status}</h4>
      <div className='row'>
        <p>Number: {state?.strNumber}</p>
        <p>Operator: {state?.strOperator}</p>
      </div>
      <div className='row'>
        <Stack items={state.processor._rawStack} />
        <Stack items={state.processor._rsltStack} />
      </div>
    </Wrapper>
  )
}

const Wrapper = styled.div`
  & h4 {
    color: green;
    margin: .5rem 0;
  }

  & div.row {
    margin-top: .5rem;
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    color: blue;
  }

  & ul {
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: 1.2rem;
  }

  & ul li {
    width: 100%;
    padding: .3rem;
    text-align: center;
    color: white;
    background-color: #805e00f6;
  }
  & ul li.func {
    background-color: #914a04ee;
    font-weight: 700;
  }
`;
